<script setup>
import { ref } from 'vue'
import {
  User,
  UserFilled,
  House,
  Money,
  OfficeBuilding,
  Notification,
  Collection,
  Avatar,
  School,
  Place,
  Memo,
  Search,
  Message,
  Notebook,
  CirclePlus,
  KnifeFork,
  Dish,
  Plus,
  ShoppingCartFull
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { ElMessage, ElIcon } from 'element-plus';

const router = useRouter();

const goToExternalLink = () => {
  // 执行跳转
  window.location.href = 'http://localhost:8081/#/';
};
const handleOpen = (key, keyPath) => {
  // console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  // console.log(key, keyPath)
}

</script>

<template>
<!-- 导航栏-->
  <el-menu
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      router="true"
  >
    <el-menu-item
        index="1"
        @click="goToExternalLink"
    >
      <el-icon><House /></el-icon>
      <template #title>首页</template>
    </el-menu-item>

    <el-sub-menu index="1">
      <template #title>
        <el-icon><Notebook /></el-icon>
        <span style="font-size: 18px">人员管理</span>
      </template>
      <el-menu-item index="/admin/teacher">
        <el-icon><UserFilled /></el-icon>
        <template #title>教师管理</template>
      </el-menu-item>
      <el-menu-item index="/admin/student">
        <el-icon><Avatar /></el-icon>
        <template #title>学生管理</template>
      </el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="2">
      <template #title>
        <el-icon><Message /></el-icon>
        <span style="font-size: 18px">信息管理</span>
      </template>
      <el-menu-item index="/admin/notice">
        <el-icon><Notification /></el-icon>
        <template #title>公告管理</template>
      </el-menu-item>
      <el-menu-item index="/admin/dept">
        <el-icon><School /></el-icon>
        <template #title>院系管理</template>
      </el-menu-item>
      <el-menu-item index="/admin/dormitory">
        <el-icon><OfficeBuilding /></el-icon>
        <template #title>宿舍管理</template>
      </el-menu-item>
      <el-sub-menu index="4">
        <template #title>
          <el-icon><Memo /></el-icon>
          <span style="font-size: 18px">课程管理</span>
        </template>
        <el-menu-item index="/admin/course">本学期课程</el-menu-item>
        <el-menu-item index="/admin/history">往学期课程</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>

    <el-sub-menu index="3">
      <template #title>
        <el-icon><Search /></el-icon>
        <span style="font-size: 18px">记录查询</span>
      </template>
      <el-menu-item index="/admin/arrive">
        <el-icon><Place /></el-icon>
        <template #title>报到打卡记录</template>
      </el-menu-item>
      <el-menu-item index="/admin/pay">
        <el-icon><Money /></el-icon>
        <template #title>新生学费记录</template>
      </el-menu-item>
      <el-menu-item index="/admin/goods">
        <el-icon><Collection /></el-icon>
        <template #title>物品领取记录</template>
      </el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="4">
      <template #title>
        <el-icon><ShoppingCartFull /></el-icon>
        <span style="font-size: 18px">食堂管理</span>
      </template>
      <el-menu-item index="/admin/enroll">
        <el-icon><CirclePlus /></el-icon>
        <template #title>商家注册管理</template>
      </el-menu-item>
      <el-menu-item index="/admin/mall">
        <el-icon><KnifeFork /></el-icon>
        <template #title>商家管理</template>
      </el-menu-item>
      <el-menu-item index="/admin/dishes">
        <el-icon><Dish /></el-icon>
        <template #title>菜品管理</template>
      </el-menu-item>
      <el-menu-item index="/admin/dishShelf">
        <el-icon><Plus /></el-icon>
        <template #title>菜品上架管理</template>
      </el-menu-item>
    </el-sub-menu>
    <el-menu-item index="/admin/profile">
      <el-icon><User /></el-icon>
      <template #title>个人中心</template>
    </el-menu-item>
  </el-menu>
</template>

<style scoped>
.el-menu-item{
  font-size: 18px;
}
.el-menu-item.is-active{
  font-size: 18px;
}
</style>